<template>
  <a-card :bordered="false">
    <a-card :bordered="false" size="small">
      <a-breadcrumb>
        <a-breadcrumb-item><router-link to="/saleList">用户管理</router-link></a-breadcrumb-item>
        <a-breadcrumb-item>用户详情</a-breadcrumb-item>
      </a-breadcrumb>
    </a-card>
    <a-card>
      <a-tabs v-model="activeKey">
        <a-tab-pane :key="1" tab="基础信息">
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">用户姓名:</div>
            <div class="meizong_detail_val">{{detail.nickname}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">用户手机号:</div>
            <div class="meizong_detail_val">{{detail.mobile}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">创建时间:</div>
            <div class="meizong_detail_val">{{detail.createTime}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">用户头像:</div>
            <div class="meizong_detail_val">
              <ant-img :antImgesUl="detail.avatar" :width="150" :height="150"/>
              <!-- <ant-img :antImges="detail.avatar" :width="150" :height="150"/> -->
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">用户标签:</div>
            <div class="meizong_detail_val">
              <a-tag color="green" v-for="(item , index) in detail.tagList" :key="index">{{item}}</a-tag>
              <a-button type="primary" @click="funEditTag" icon="edit" size="small">修改标签</a-button>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">性别:</div>
            <div class="meizong_detail_val">{{detail.sex | sex}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">状态:</div>
            <div class="meizong_detail_val">{{detail.status | status}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">角色:</div>
            <div class="meizong_detail_val">{{detail.type | type}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">地区:</div>
            <div class="meizong_detail_val">{{(detail.provinceName || detail.cityName || detail.districtName) ? detail.provinceName + detail.cityName + detail.districtName:'地区未填写'}}</div>
          </div>
        </a-tab-pane>  
      </a-tabs>
    </a-card>
    <!-- 表单区域 -->
    <edit-tag-modal ref="editTagForm" @closeModal="closeModal"></edit-tag-modal>
  </a-card>
</template>

<script>
import AntImg from '@/views/components/meizong/antImg'
import EditTagModal from '@/views/personnel/modules/tagListModal';
import ApiTree from '@/api/personnel/member';
import { Slime } from '@/mixins/slime';
export default {
  name: 'memberDetail',
  mixins: [Slime],
  components: {
    AntImg,
    EditTagModal,
  },
  data() {
    return {
      activeKey: 1,
      detailId: null,
      detail:{},
      //table
      tableData:[],
      columns: [
        {
          title: "审批人id",
          align: "center",
          dataIndex: "userId",
        },
        {
          title: "审批人姓名",
          align: "center",
          dataIndex: "userName",
        },
        {
          title: "动作",
          align: "center",
          dataIndex: "action",
          customRender: function (status) {
            switch (status) {
              case 0:
                return "初始状态";
              case 1:
                return "待审核";
              case 2:
                return "审核不通过";
              case 3:
                return "停用";
              case 5:
                return "启用中";
              default:
                return "未知状态";
            }
          },
        },
        {
          title: "备注",
          align: "center",
          dataIndex: "remark",
        },
        {
          title: "创建时间",
          align: "center",
          dataIndex: "createTime",
        },
      ],
    };
  },
  created() {
    let id = this.$route.query.id
    this.detailId = id
    this.loadData();
  },
  methods: {
    // 加载表格数据
    loadData() {
      let that = this
      let id = this.detailId
      ApiTree.getDetail(id).then((res)=>{
        let data = res.result
        this.detail = {
          ...data,
          avatar: that.antImageArr(data.avatar),
        }
      })
    },
    //修改标签
    funEditTag(){
      let tagList = this.detail.tagList;
      let memberId = [parseInt(this.detailId)];
      this.$refs.editTagForm.open(tagList, memberId);
    },
  },
  filters: {
    //角色
    type: function (status) {
      switch (status) {
        case 0:
          return "普通用户";
        case 1:
          return "技师";
        case 2:
          return "商家";
        case 3:
          return "商家子账户";
        default:
          return "未知";
      }
    },
    //性别
    sex: function (status) {
      switch (status) {
        case 0:
          return "未知";
        case 1:
          return "男";
        case 2:
          return "女";
        default:
          return "未知";
      }
    },
    //状态
    status: function (status) {
      switch (status) {
        case 0:
          return "可用";
        case 1:
          return "禁用";
        case 2:
          return "注销";
        default:
          return "未知";
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>